<template>
          <div class="top">
              <div class="choose">
                 <span>
                  用户：<input type="text" class="search_child" placeholder="如:用户名/用户ID/邮箱" v-model="searchValue"></span>
                  <span>
                  注册时间：<input type="date" class="search_child" v-model="userInfoPage.dateTime"></span>
                  <span>
                  积分排序：<select  class="page_index"  @change ="sortBy_($event)">
                               <option  v-for="(item,index) in sortBy" index="index">{{item}}</option>
                            </select>
               </span>
                  <span  class="search_click" @click="search_">搜索</span>
              </div>



              <div class="t_right_">
                  状态:
                 <label @click="condition_(2)">
                     <input name="statue" :checked="this.userInfoPage.types === 2" type="radio" >全部
                 </label>
                  <label @click="condition_(1)">
                      <input name="statue" :checked="this.userInfoPage.types === 1" type="radio">启用
                  </label>
                  <label @click="condition_(0)">
                      <input name="statue" :checked="this.userInfoPage.types === 0" type="radio">禁用
                  </label>
                  <label @click="condition_(-1)">
                      <input name="statue" :checked="this.userInfoPage.types === -1" type="radio">注销
                  </label>
              </div>

          </div>


          <div class="bottom">
              <table cellpadding="0" cellspacing="0" >
                  <thead>
                  <tr>
                      <th>序号</th>
                      <th>账号</th>
                      <th>ID</th>
                      <th>用户名</th>
                      <th>性别</th>
                      <th>年龄</th>
                      <th>电话</th>
                      <th>邮箱</th>
                      <th style="min-width: 100px">出生年月</th>
                      <th style="min-width: 100px">注册日期</th>
                      <th style="min-width: 150px">最后一次登录时间</th>
                      <th>积分</th>
                      <th>状态</th>
                      <th>操作</th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr v-for="(item,index) in fuzzyQueries" v-if="fuzzyQueries.length>0">
                      <td>{{index+1}}</td>
                      <td v-html="highlight_(item.account )"></td>
                      <td v-html="highlight_(item.uid )"></td>
                      <td v-html="highlight_(item.username )"></td>
                      <td>{{item.sex === 1 ? '男':'女'}}</td>
                      <td>{{ generalTools.age_(item.born) }}</td>
                      <td>{{value_(item.phone)}}</td>
                      <td v-html="highlight_(value_(item.email) )"></td>
                      <td>{{item.born}}</td>
                      <td>{{item.registrationTime}}</td>
                      <td>{{item.lastLogonTime}}</td>
                      <td>{{item.integral}}</td>
                      <td>
                          <span class="button_style"
                          :style="{'background': item.state === 1 ? '#32CD32': item.state === 0 ? '#efcb04':'#DC143C' }">
                              {{ item.state === 1 ? '正常': item.state === -1 ? '注销':'禁用' }}
                          </span>
                      </td>
                      <td>
                          <span class="edit" @click="edit_userInfo(item)">编辑</span>
                          <span class="edit del" @click="edit_del(item,index)">删除</span>
                      </td>
                  </tr>
                  <tr v-else-if="fuzzyQueries.length===0 && load_" style="height: 50vh;background: transparent">
                      <LoadTheAnimation ></LoadTheAnimation>
                  </tr>
                  <tr v-show="!load_">
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td><h2>未查询到任何数据</h2></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                  </tr>
                  </tbody>
              </table>
          </div>
   <div class="bottom_">
       <span style="margin-right:10px">共{{total.page}}页, 共{{total.sum}}条数据 当前第{{total.current}}页</span>
       <span class="jian"  @click="left_">
           <img src="../../../public/static/jian_r.png" alt="">
       </span>
       <input type="text" class="limit" v-model="total.current"   @focusout="limit_">
       <span class="jian" @click="right_">
           <img src="../../../public/static/jian_l.png" alt="" >
       </span>
       <select @change ="page_($event)" class="page_index">
           <option  v-for="(item,index) in 3" >{{(index+1)*10}}/条</option>
       </select>
   </div>
    <PromptWindow v-show="box_confirm" @confirm="confirm" :info="info" :index="index_"></PromptWindow>
</template>

<script>
import api from "@/api";
import LoadTheAnimation from "@/components/publicCommon/LoadTheAnimation.vue";
import PromptWindow from "@/components/publicCommon/PromptWindow.vue";
import {generalTools} from "@/config/util/general";

export default {
    name: "UserInformation",
    computed: {
        generalTools() {
            return generalTools
        }
    },
    components: {PromptWindow, LoadTheAnimation},
    data(){
        return{
            select:false,
            searchValue:"",
            fuzzyQueries:"",
            userInfoPage:{
                index:1,
                types:2,
                dateTime:null,
                condition:null,
                sortBy:0,
                page: 10,
            },
            admin_s:false,
            total:{
                sum:'',
                page:'',
                size:'',
                current:'',
            },
            load_:true,
            info:"",
            box_confirm:false,
            index_:0,
            del_info:false,
            sortBy:['从低到高','从高到低'],
        }
    },
    mounted() {
        this.request_(this.userInfoPage);
    },
    watch:{
        'userInfoPage.dateTime'(newValue,oldValue){
            if(newValue == "") {
                this.userInfoPage.dateTime = null
            }
        },
        'userInfoPage.page'(newValue,oldValue){
            this.userInfoPage.page = newValue;
            this.request_(this.userInfoPage);
        },
        del_info(newValue,oldValue){
            if(newValue){
              api.userDel(this.info.uid).then((res)=>{
                  if(res.data.code === 200){
                      this.$store.commit("requestInfo", "删除成功");
                  }else {
                      this.$store.commit("requestInfo", "删除失败");
                  }
                  this.request_(this.userInfoPage);
              })
                    this.info = "";
                    this.del_info = false;

            }
        },

        'total.current'(newVal, oldVal){
            let reg = /^\+?[1-9]\d*$/;
            if(reg.test(newVal)){
                this.userInfoPage.index = newVal;
            }
            if(newVal > this.total.page){
                this.$store.commit("requestInfo", "不能超过最大页数！");
                this.userInfoPage.index = 1;
            }
        },
        searchValue(newValue,oldValue){
            if(newValue === ""){
                this.userInfoPage.condition =null
                this.request_(this.userInfoPage);
            }else{
                this.userInfoPage.condition = newValue
            }
        },
    },
    methods:{
        page_(event){
            this.userInfoPage.page = parseInt(event.target.value);
            this.request_(this.userInfoPage);
        },
        confirm(index,bool){
            this.box_confirm = false;
            if(bool){
                this.del_info  = true;
                this.fuzzyQueries.splice(index, 1);
            }
        },
        edit_del(info, index) {
            this.info = info;
            this.index_ = index;
            this.box_confirm = true;
        },
        value_(phone){
            if(phone === null || phone === ""){
                return "无";
            }
            return phone;
        },
        edit_userInfo(info){
            window.localStorage.setItem("edit_info",JSON.stringify(info));
            this.$router.push('/userInformationEditing')
        },
        search_(){
            this.request_(this.userInfoPage)
        },
        highlight_(text){
            text = text+"";
            if(this.searchValue !== "")
              return text.replace(this.searchValue,'<span style="background: #f6f604;">'+this.searchValue+'</span>')
            else return text
        },
        sortBy_(event){
            switch (event.target.value) {
                case '从低到高':
                    this.userInfoPage.sortBy = 0;
                    break;
                case '从高到低':
                    this.userInfoPage.sortBy = 1;
                    break;
            }
        },
        condition_(condition){
            this.userInfoPage.index = 1;
            this.userInfoPage.types = condition;
            this.request_( this.userInfoPage);
        },
        limit_(){
            this.request_(this.userInfoPage);
        },
        request_(userInfoPage){
            api.selectLimitUserCondition(userInfoPage).then((res)=>{
                this.fuzzyQueries = res.data.data.records;
                this.total.sum = res.data.data.total;
                this.total.page = res.data.data.pages;
                this.total.current = res.data.data.current;
                this.total.size = res.data.data.size;
                if(this.fuzzyQueries.length===0){
                    setTimeout(()=>{
                        this.load_ = false;
                    },1000)
                }else {
                    this.load_ = true;
                }
            })
        },
        left_(){
            this.userInfoPage.index-=1;
            if( this.userInfoPage.index<1){
                this.userInfoPage.index=1;
                this.$store.commit("requestInfo", "当前已是第一页");
                return;
            }
            this.request_( this.userInfoPage);
        },
        right_(){
            this.userInfoPage.index+=1;
            if( this.userInfoPage.index> this.total.page){
                this.userInfoPage.index = this.total.page;
                this.$store.commit("requestInfo", "已是最后一页");
                return;
            }
            this.request_( this.userInfoPage);
        },

    }
}
</script>

<style scoped>
.search_child{
    height: 30px;
    padding:0 10px;
    outline:none;
}
.choose{
    margin-left: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.choose span{
    margin-right: 10px;
}
.search_click{
    display: inline-block;
    background: #057cf8;
    padding: 4px 7px;
    color: white;
    cursor: pointer;
}
.search_click:hover{
    opacity: .8;
}
.page_index{
    height: 26px;
    outline: none;
    padding: 0 7px;
    color: #4297ec;
    border: 1px solid #282828;
}
option{
    padding: 10px;
}
</style>